<template>
  <view class="register-container">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="title">创建账号</text>
      <text class="subtitle">开启您的健康之旅</text>
    </view>
    
    <!-- 注册表单 -->
    <view class="register-card">
      <!-- 手机号/邮箱输入 -->
      <view class="input-group">
        <text class="input-label">手机号/邮箱</text>
        <input 
          type="text" 
          style="width: 100%; height: 80rpx; border: 1px solid #ddd; padding: 0 20rpx; box-sizing: border-box;"
          placeholder="请输入手机号或邮箱"
          v-model="formData.username"
        />
        <text class="error-message" v-if="errors.username">{{ errors.username }}</text>
      </view>
      
      <!-- 密码输入 -->
      <view class="input-group">
        <text class="input-label">设置密码</text>
        <view style="position: relative; width: 100%;">
          <input 
            :type="passwordVisible ? 'text' : 'password'"
            style="width: 100%; height: 80rpx; border: 1px solid #ddd; padding: 0 20rpx; padding-right: 100rpx; box-sizing: border-box;"
            placeholder="请设置6-20位密码"
            v-model="formData.password"
          />
          <text 
            style="position: absolute; right: 20rpx; top: 50%; transform: translateY(-50%); color: #666;"
            @click="togglePasswordVisible"
          >
            {{ passwordVisible ? '隐藏' : '显示' }}
          </text>
        </view>
        <text class="error-message" v-if="errors.password">{{ errors.password }}</text>
      </view>
      
      <!-- 确认密码输入 -->
      <view class="input-group">
        <text class="input-label">确认密码</text>
        <view style="position: relative; width: 100%;">
          <input 
            :type="passwordVisible ? 'text' : 'password'"
            style="width: 100%; height: 80rpx; border: 1px solid #ddd; padding: 0 20rpx; padding-right: 100rpx; box-sizing: border-box;"
            placeholder="请再次输入密码"
            v-model="formData.confirmPassword"
          />
          <text 
            style="position: absolute; right: 20rpx; top: 50%; transform: translateY(-50%); color: #666;"
            @click="togglePasswordVisible"
          >
            {{ passwordVisible ? '隐藏' : '显示' }}
          </text>
        </view>
        <text class="error-message" v-if="errors.confirmPassword">{{ errors.confirmPassword }}</text>
      </view>
      
      <!-- 注册按钮 -->
      <button 
        class="register-btn" 
        :class="{ disabled: isLoading }"
        @click="handleSubmit"
        :disabled="isLoading"
      >
        <view class="loading" v-if="isLoading"></view>
        {{ isLoading ? '注册中...' : '注册' }}
      </button>
      
      <!-- 返回登录链接 -->
      <view class="login-link">
        <text @click="navigateToLogin">已有账号？返回登录</text>
      </view>
      
      <!-- 用户协议 -->
      <view class="terms">
        <text>注册表示您同意</text>
        <text class="link" @click="navigateToAgreement">《用户协议》</text>
        <text>和</text>
        <text class="link" @click="navigateToPrivacy">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据
      formData: {
        username: '',
        password: '',
        confirmPassword: ''
      },
      // 错误信息
      errors: {
        username: '',
        password: '',
        confirmPassword: ''
      },
      // 是否正在加载
      isLoading: false,
      // 密码是否可见
      passwordVisible: false
    }
  },
  methods: {
    /**
     * 切换密码可见性
     */
    togglePasswordVisible() {
      this.passwordVisible = !this.passwordVisible;
    },
    
    /**
     * 表单验证
     * @returns {Boolean} 是否通过验证
     */
    validateForm() {
      let isValid = true;
      
      // 清空之前的错误信息
      this.errors = {
        username: '',
        password: '',
        confirmPassword: ''
      };
      
      // 验证用户名
      if (!this.formData.username) {
        this.errors.username = '请输入手机号或邮箱';
        isValid = false;
      } else if (!this.isValidUsername(this.formData.username)) {
        this.errors.username = '请输入有效的手机号或邮箱';
        isValid = false;
      }
      
      // 验证密码
      if (!this.formData.password) {
        this.errors.password = '请设置密码';
        isValid = false;
      } else if (this.formData.password.length < 6 || this.formData.password.length > 20) {
        this.errors.password = '密码长度应在6-20位之间';
        isValid = false;
      } else if (!this.isValidPassword(this.formData.password)) {
        this.errors.password = '密码应包含字母和数字';
        isValid = false;
      }
      
      // 验证确认密码
      if (!this.formData.confirmPassword) {
        this.errors.confirmPassword = '请确认密码';
        isValid = false;
      } else if (this.formData.confirmPassword !== this.formData.password) {
        this.errors.confirmPassword = '两次输入的密码不一致';
        isValid = false;
      }
      
      return isValid;
    },
    
    /**
     * 验证用户名格式（手机号或邮箱）
     * @param {String} username - 用户名
     * @returns {Boolean} 是否有效
     */
    isValidUsername(username) {
      // 手机号正则（11位数字）
      const phoneRegex = /^1[3-9]\d{9}$/;
      // 邮箱正则
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      
      return phoneRegex.test(username) || emailRegex.test(username);
    },
    
    /**
     * 验证密码格式
     * @param {String} password - 密码
     * @returns {Boolean} 是否有效
     */
    isValidPassword(password) {
      // 密码应包含字母和数字
      const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/;
      return passwordRegex.test(password);
    },
    
    /**
     * 处理表单提交
     */
    handleSubmit() {
      // 验证表单
      if (!this.validateForm()) {
        return;
      }
      
      // 设置加载状态
      this.isLoading = true;
      
      // 调用注册API
      uni.request({
        url: 'https://api.example.com/auth/register', // 替换为实际API地址
        method: 'POST',
        data: {
          username: this.formData.username,
          password: this.formData.password
        },
        success: (res) => {
          this.isLoading = false;
          
          if (res.data.code === 200) {
            // 注册成功
            uni.showToast({
              title: '注册成功',
              icon: 'success',
              duration: 2000
            });
            
            // 跳转到登录页面
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/index/index'
              });
            }, 1500);
          } else {
            // 注册失败
            uni.showToast({
              title: res.data.message || '注册失败',
              icon: 'none',
              duration: 2000
            });
          }
        },
        fail: (err) => {
          this.isLoading = false;
          uni.showToast({
            title: '网络错误，请重试',
            icon: 'none',
            duration: 2000
          });
        }
      });
    },
    
    /**
     * 跳转到登录页面
     */
    navigateToLogin() {
      uni.navigateTo({
        url: '/pages/index/index'
      });
    },
    
    /**
     * 跳转到用户协议页面
     */
    navigateToAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/agreement'
      });
    },
    
    /**
     * 跳转到隐私政策页面
     */
    navigateToPrivacy() {
      uni.navigateTo({
        url: '/pages/privacy/privacy'
      });
    }
  }
}
</script>

<style>
/* 页面容器 */
.register-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 40rpx;
  background: linear-gradient(180deg, rgba(126, 166, 129, 1) 0%, rgba(193, 223, 196, 1) 100%);
  box-sizing: border-box;
}

/* 头部标题 */
.header {
  text-align: center;
  padding: 100rpx 0 80rpx;
  color: white;
}

.title {
  font-size: 52rpx;
  font-weight: 700;
  margin-bottom: 20rpx;
  display: block;
  letter-spacing: 2rpx;
  text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
}

.subtitle {
  font-size: 34rpx;
  opacity: 0.95;
  display: block;
  letter-spacing: 1rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

/* 注册卡片 */
.register-card {
  background: white;
  border-radius: 24rpx;
  padding: 50rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

/* 输入组 */
.input-group {
  margin-bottom: 40rpx;
  width: 100%;
  box-sizing: border-box;
}

.input-label {
  display: block;
  font-size: 32rpx;
  color: #2c3e50;
  margin-bottom: 20rpx;
  font-weight: 500;
}

/* 输入框包装器 */
.input-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border: 2rpx solid #dce0e6;
  border-radius: 16rpx;
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  align-items: center;
}

/* 输入框样式 */
.input-field {
  flex: 1;
  padding: 28rpx;
  font-size: 32rpx;
  background-color: transparent;
  box-sizing: border-box;
  -webkit-user-select: auto;
  user-select: auto;
  border: none;
  outline: none;
  position: relative;
  z-index: 1;
}

.input-field:focus {
  background-color: #ffffff;
  border: none;
  outline: none;
  color: #000;
}

/* 密码可见性切换 */
.show-password {
  padding: 0 20rpx;
  color: #7ea681;
  font-size: 28rpx;
  background: transparent;
}

/* 注册按钮 */
.register-btn {
  width: 100%;
  background: linear-gradient(180deg, rgba(126, 166, 129, 1) 0%, rgba(193, 223, 196, 1) 100%);
  color: white;
  border: none;
  padding: 28rpx;
  border-radius: 16rpx;
  font-size: 36rpx;
  font-weight: 500;
  margin-top: 20rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.register-btn:active {
  opacity: 0.9;
}

.register-btn.disabled {
  background: #cccccc;
}

/* 登录链接 */
.login-link {
  text-align: center;
  margin: 40rpx 0;
}

.login-link text {
  color: #7ea681;
  font-weight: 500;
  font-size: 32rpx;
}

/* 协议文本 */
.terms {
  text-align: center;
  font-size: 26rpx;
  color: #777777;
  line-height: 1.6;
}

.terms .link {
  color: #7ea681;
}

/* 错误提示 */
.error-message {
  color: #e74c3c;
  font-size: 26rpx;
  margin-top: 10rpx;
  display: block;
}

/* 加载动画 */
.loading {
  display: inline-block;
  width: 36rpx;
  height: 36rpx;
  border: 4rpx solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  margin-right: 10rpx;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>